<!--  -->
<template>
  <div class="home-new">
    <div class="new-header">
      <TitleHeader :value="value"></TitleHeader>
    </div>
    <div class="new-body">
      <div class="new_box" v-for="item in newGoodsList" :key="item.id" @click="toDetail(item.id)">
        <GoodsBox :data="item"></GoodsBox>
      </div>
    </div>
  </div>
</template>

<script>
import {defineComponent, ref} from 'vue'
import {useRouter} from 'vue-router'
import TitleHeader from '@/components/TitleHeader.vue'
import GoodsBox from '@/components/GoodsBox.vue'
export default defineComponent({
  name: 'HomeNewGoodsList',
  props: {
    newGoodsList: {
      type: Array,
      default() {
        return []
      }
    }
  },
  components: {
    TitleHeader,
    GoodsBox
  },
  setup() {
    const value = ref('周一周四-新品首发')
    const router = useRouter()
    const toDetail = (id) => {
      router.push({
        path: '/detail',
        query: {
          id
        }
      })
    }
    return {
      value,
      toDetail
    }
  }
})
</script>

<style lang="scss" scoped>
  .home-new {
    background-color: #fff;
  }
  .new-header {
    width: 100%;
    height: 100px;
  }
  .new-body {
    width: 100%;
    display: flex;
    flex-flow: wrap;
    padding-bottom: 40px;
  }
  .new_box {
    width: 49%;
    height: 500px;
  }
</style>